<template>
	<view>
		<view class="toptext">
			<text class="text">{{title}}</text>
		</view>
		<view class="boximg">
			<text>图片</text>
			<button class="btn" @click="btnimg"></button>
			<image :src="headimg"></image>
		</view>
		<view class="boxtext">
			<text>通知内容</text>
			<input class="text" type="text" v-model="supername">
		</view>
		<view>
			<button @click="updata">{{btnname}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'个人信息',list:{},btnname:'发布',
				type: "false",headimg:"http://localhost:3000/static/logoimg/通知.png",supername:''
			}
		},
		methods: {
			async btnimg(){
				const res = await this.Upload({
					url:'api/upload/postimage'
				});
				this.headimg=  res.data.slice(8,80)
			},
			async updata(){
				const res =await this.Request({
					url:'/api/super/addmessage',
					method:'POST',
					data:{title:this.supername,image:this.headimg}
				})
				if(res){
					uni.showToast({
						title: '发布'
					})
					setTimeout(() => {
						uni.reLaunch({
							url:'/pages/super/sup-homepage/sup-homepage'
						})
					},1000)
				}
			},
		}
	}
</script>

<style lang="scss">
	text{
		font-family: 'Courier New';
		font-size: 130%;
		font-weight: 800;
		margin:auto 0;
		margin-left: 5px;
	}
	input{
		margin:auto 0;
	}
	.toptext{
		width: 100%;
		background-color: #efefef;
		display: flex;
		border-bottom: 1px solid #ccc;
		.text{
			margin: 5px 0 5px 5px;
			font-size: 110%;
			font-weight: 700;
			color: #d3d3d3;
		}
	}
	.boximg{
		height: 80px;
		width: 80px;
		display: flex;
		position: relative;
		.btn{
			height: 70px;
			width: 70px;
			position: absolute;
			margin-top: 5px;
			margin-left: 140px;
			z-index: 5;
			opacity: 0;
		}
		image{
			position: absolute;
			margin: 5px 0 5px 140px;
			height: 70px;
			width: 70px;
			/* 背景图片置于最低层 */
			z-index: 3;
		}
	}
	.boxtext{
		height: 50px;
		display: flex;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		.text{
			margin-left: 65px;
			color: #d3d3d3;
		}
	}
	.boxtel{
		height: 50px;
		display: flex;
		border-bottom: 1px solid #ccc;
		.text{
			margin-left: 65px;
			color: #d3d3d3;
		}
	}
</style>
